<!-- src/components/NavMenu.vue -->
<template>
  <el-menu
      router
      :default-active="$route.path"
      background-color="#3c4b64"
      text-color="#fff"
      active-text-color="#ffd04b"
      class="el-menu-vertical-demo"
      :default-openeds="[currentTop?.path]"
  >
    <el-sub-menu
        v-for="top in topRoutes"
        :key="top.path"
        :index="`/${top.path}`"
    >
      <template #title>
        <el-icon v-if="top.meta.icon">
          <component :is="resolveIcon(top.meta.icon)" />
        </el-icon>
        <span>{{ top.meta.title }}</span>
      </template>

      <el-menu-item
          v-for="sub in top.children.filter(c => c.meta?.title && !c.meta.hidden)"
          :key="sub.path"
          :index="`/${top.path}/${sub.path}`"
      >
        {{ sub.meta.title }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute }   from 'vue-router'
import { useCounterStore } from '@/stores/counter'

// 1) 导入各模块的静态定义
import master   from '@/router/modules/master'
import registry from '@/router/modules/registry'
import doctor   from '@/router/modules/doctor'
import lab      from '@/router/modules/lab'

// 2) 重用你 router/index.js 里的这张映射表
const asyncRouteMap = {
  0: [ master, registry, doctor, lab ],
  1: [ master ],
  2: [ registry ],
  3: [ doctor ],
  4: [ lab ]
}

// Pinia 里拿到当前用户类型
const counter = useCounterStore()
const route   = useRoute()

// 一级菜单就是映射表里该 useType 的数组
const topRoutes = computed(() => {
  return asyncRouteMap[counter.useType] || []
})

// 自动展开当前所在的一级菜单
const currentTop = computed(() => {
  return topRoutes.value.find(r =>
      route.path.startsWith(`/${r.path}`)
  )
})

// 图标解析
import * as Icons from '@element-plus/icons-vue'
const resolveIcon = name => Icons[name] || Icons.Menu
</script>

<style scoped>
.el-menu-vertical-demo {
  border: none;
  height: 100%;
}
</style>
